<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天天生鲜-商品详情</title>
    <link rel="shortcut icon" href="../images/logo.png" type="image/x-icon">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/detail.css">
</head>
<body>
    <div class="top-nav">
        <ul class="row">
            <li>欢迎来到天天生鲜!</li>
            <li class="space"></li>
            <li>登录</li>
            <li>|</li>
            <li>注册</li>
            <li>|</li>
            <li>用户中心</li>
            <li>|</li>
            <li>我的购物车</li>
            <li>|</li>
            <li>我的订单</li>
        </ul>
    </div>
    <div class="main">
        <div class="top-search">
            <img src="../images/logo.png" alt="">
            <div class="serch-box">
                <input type="text" placeholder="请输入商品名称">
                <span>搜索</span>
            </div>
            <div class="cart-box">
                <div class="cart-text"> 我的购物车</div>
                <div class="cart-num">1</div>
            </div>
        </div>
    </div>
    <div class="cate-titbox">
        <ul class="cate">
            <h2>全部商品</h2>
            <li>手机</li>
            <li>|</li>
            <li>手机生鲜</li>
            <li>|</li>
            <li>抽奖</li>
        </ul>
    </div>
    <div class="nav">
        <span>全部分类</span> <i></i> <span>新鲜水果</span> <i></i> <span>商品详情</span>
    </div>

    <div class="detail">
        <div class="row">
            <img src="../images/goods_detail.jpg">
            <div class="gd">
                <div class="tit">大兴大鹏草莓</div>
                <p>草莓浆果柔软多汁,味美爽口,适合速冻保鲜贮藏。草莓速冻后,可以保持原有的色、香、味,既便于贮藏,又便于外销。</p>
                <div class="price-box">
                    <span>￥<font>16.80</font></span>
                    <span>单位:500g</span>
                </div>
                <div class="asn">
                    <label for="num">数量:</label>
                    <div class="in">
                        <input type="text" value="1">
                        <div class="as">
                            <span>+</span>
                            <span>-</span>
                        </div>
                    </div>
                </div>
                <div class="total">
                    总价: <span>16.80</span>
                </div>
                <div class="btns">
                    <button class="default">立即购买</button>
                    <button class="delete">加入购物车</button>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="left">
                <div class="tit">新鲜水果</div>
                <div class="gad">
                    <img src="../images/goods001.jpg">
                    <p>进口柠檬</p>
                    <div class="des">￥3.90</div>
                </div>
                <div class="gad">
                    <img src="../images/goods002.jpg">
                    <p>玫瑰香葡萄</p>
                    <div class="des">￥16.80</div>
                </div>
            </div>
            <div class="right">
                <div class="tits">
                    <div class="title active">商品介绍</div>
                    <div class="title">评价</div>
                </div>
                <div class="cons">
                    <div class="con">
                        商品详情:<br>
                        草藏采摘园位于北京大兴区 庞各庄镇四各庄村，每年1-6月面向北京以及周围城市提供新鲜草莓采播和精品礼盒装草莓，草莓品种多样丰富，个大 香甜。
                        所有草莓均严格按照有机标准培育，不使用任何化肥和农药。草莓在采摘期间免洗可以直接食用。欢迎喜欢草莓的市民前来采摘，也欢迎各大单位选购精品有机草莓礼盒，有机草莓礼盒是亲朋馈赠、福利送礼的最佳选择。<br>
                    </div>
                    <div class="con">
                        评价内容: <br>大人小孩都爱吃
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="bottom">
        <ul class="row">
            <li>关于我们</li>
            <li>|</li>
            <li>联系我们</li>
            <li>|</li>
            <li>招聘人才</li>
        </ul>
        <p>
            CopyRight&copy; 2023 22级移动应用开发
        </p>
        <p>
            电话:12345676661&nbsp;&nbsp;qq:666666@qq.com
        </p>
    </div>
</body>
<script src="../js/jquery-3.6.4.min.js"></script>
<script>
    $(document).ready(function () {
        $(".right .tits .title").click(function () {
            $(".right .tits .title").removeClass("active");
            $(this).addClass("active")
            let idx = $(this).index()
            $(".cons .con").hide();
            $($(".cons .con")[idx]).show();
        })
    })
</script>
</html>